<template>
  <div class="table-container">
    <a-card :bordered="false" class="mb-3">
      <div class="flex justify-between">
        <div>
          <a-button type="primary" @click="newItem">
            {{ t["新增"] }}
          </a-button>
          <template>
            <a-popover trigger="click">
              <a-button class="ml-4 px-6" type="text" :disabled="selectedKeys.length !== 1">
                导出编码
                <template #icon> <IconExport /> </template>
              </a-button>
              <template #content>
                <a-input-number
                  v-model="exportConfig.count"
                  :max="1000000"
                  placeholder="请输入数量"
                  class="mb-2"
                >
                </a-input-number>
                <a-button long type="primary" @click="exportCodes">确定</a-button>
              </template>
            </a-popover>
          </template>
        </div>
        <XDelete :disabled="selectedKeys.length <= 0" @ok="delByIds" />
      </div>
    </a-card>
    <a-card :bordered="false">
      <a-table
        v-bind="comTableConfig"
        v-model:selectedKeys="selectedKeys"
        size="medium"
        page-position="bottom"
        :columns="translateColumns(columns)"
        :loading="loading"
        column-resizable
        :data="tableData"
        :row-selection="rowSelection"
        row-key="resolutionId"
        :pagination="{
          pageSize: query.pageSize,
          total: query.total,
          current: query.pageNum,
          showJumper: true,
          showPageSize: true,
          showTotal: true
        }"
        @cell-click="selectItem"
        @page-change="pageChange"
        @page-size-change="pageSizeChange"
      >
        <template #toRotate="{ record }">
          <div>
            <IconCheck v-if="record.toRotate == '0'" style="color: green"></IconCheck>
            <IconClose v-else style="color: red"></IconClose>
          </div>
        </template>

        <template #optional="{ record }">
          <div class="flex gap-2 justify-center">
            <a-link @click="editItem(record)">
              {{ t["编辑"] }}
            </a-link>
            <XDelete @ok="delByIds(record.resolutionId)">
              {{ t["删除"] }}
            </XDelete>
          </div>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model:visible="showModal" :title="t['操作']" :footer="false">
      <a-form :model="formModal" layout="vertical" @submit-success="save">
        <a-row :gutter="12">
          <a-col :span="12">
            <a-form-item
              :rules="{ required: true, message: t['校验失败'] }"
              field="width"
              :label="t['宽度']"
            >
              <a-input-number v-model="formModal.width" :max="2000" :min="50" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :rules="{ required: true, message: t['校验失败'] }"
              field="height"
              :label="t['高度']"
            >
              <a-input-number v-model="formModal.height" :max="2000" :min="50" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item
              field="dpi"
              :rules="{ required: true, message: t['校验失败'] }"
              label="DPI"
            >
              <a-input-number v-model="formModal.dpi" :min="50" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item
              field="color"
              :rules="{ required: true, message: t['校验失败'] }"
              :label="t['设备']"
            >
              <a-select v-model="formModal.mode" :min="50">
                <a-option v-for="(item, key) in modeOptions" :key="key" :value="item.value">
                  {{ t[item.label] }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item
              field="scale"
              :rules="{ required: true, message: t['校验失败'] }"
              :label="t['缩放']"
            >
              <a-input-number v-model="formModal.scale" :max="3" :min="0" :step="0.1" />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item
              field="toRotate"
              :label="t['旋转']"
              :rules="{ required: true, message: t['校验失败'] }"
            >
              <a-radio-group
                v-model="formModal.toRotate"
                :options="translateOptions(rotateOptions)"
              ></a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item field="description" :label="t['描述']">
              <a-textarea v-model="formModal.description" :max-length="40"></a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider />
        <a-form-item>
          <div class="text-right w-full">
            <a-button html-type="submit" type="primary">
              {{ t["保存"] }}
            </a-button>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import {
  addResolution,
  delResolution,
  exportCode,
  listResolution,
  updateResolution
} from "@/api/service/resolution/resolution";
import { IResolution } from "@/api/service/resolution/types";
import useTableConfig from "@/hook/useTableConfig";

import { IQuery } from "@/interface/IAxios";
import { TableData } from "@arco-design/web-vue";

import columns from "./columns";
import { formModal, resetForm, rotateOptions, showModal } from "./form";

const exportConfig = ref({
  model: "",
  count: 100
});
const { rowSelection, selectedKeys, comTableConfig } = useTableConfig(columns);
const t = translate("公共模块");
const tableData = ref([] as Array<IResolution>);
const loading = ref(true);
const query = ref<IQuery>({
  pageSize: 10,
  pageNum: 1,
  total: 0,
  orderByColumn: "create_time",
  isAsc: "asc"
});

const selectItem = (record: TableData) => {
  exportConfig.value.model = record.code;
  selectedKeys.value = [record.resolutionId];
};

function getList() {
  loading.value = true;
  listResolution({
    pageNum: query.value.pageNum,
    pageSize: query.value.pageSize
  })
    .then((res) => {
      tableData.value = res.rows;
      query.value.total = res.total;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}

const exportCodes = () => {
  exportCode({
    model: exportConfig.value.model,
    count: exportConfig.value.count
  });
};
const modeOptions: any[] = [
  {
    label: "单色",
    value: "0"
  },
  {
    label: "全彩",
    value: "1"
  }
];
onMounted(() => {
  getList();
});
function pageChange(index: number) {
  query.value.pageNum = index;
  getList();
}

async function delByIds(id: string) {
  const ids = id ? [id] : selectedKeys.value;
  await delResolution(ids);
  getList();
  selectedKeys.value = [];
}

/**
 * 注释: 保存
 *
 * */
const save = async () => {
  let result = null;
  if (formModal.value.resolutionId) {
    result = await updateResolution(formModal.value);
  } else {
    result = await addResolution(formModal.value);
  }
  getList();
  showModal.value = false;
};
const pageSizeChange = (size: number) => {
  query.value.pageSize = size;
};
/**
 * 注释: 新增一项
 *
 * */
const newItem = () => {
  resetForm();
  showModal.value = true;
};

/**
 * 注释: 编辑
 *
 * */
const editItem = (item: any) => {
  formModal.value = item;
  showModal.value = true;
};
</script>
